<template>
    <view>
        <view class="top-content">
            <view class="comp-bg font-style-normal" :class="[compBgClass()]">
                {{ compBgText() }}
            </view>
            <view v-if="isShop" class="content-main">
                <!-- 动画容器 -->
                <transition-group
                        name="fade"
                        tag="view"
                        mode="out-in"
                        :duration="500"
                        class="list-container"
                        v-if="shopList.length"
                >
                    <view class="shop-item"
                          v-for="item in shopList.length > 3 && !isSpread ? shopList.slice(0,3) : shopList"
                          :key="item.title">
                        <view class="shaw-img">
                            <image :src="item.url" mode="widthFix" style="width: 100%;height: 100%"></image>
                        </view>
                        <view class="show-desp">
                            <view style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 26upx">
                                <view style="color: #1A1A1A;font-size: 28upx;font-weight: 500"
                                     class="font-style-normal">
                                    {{ item.title }}
                                </view>
                                <view style="font-weight: 500;font-size: 22upx;color: #FF2500;"
                                     class="font-style-normal">{{ item.money }}元
                                </view>
                            </view>
                            <view style="font-weight: 500;font-size: 22upx;color: #333333;"
                                 class="font-style-normal">
                                {{ item.desp }}
                            </view>
                        </view>
                    </view>
                </transition-group>
                <view style="display: flex;justify-content: center;margin-top: 34upx"
                      v-if="shopList.length > 3 && !isSpread">
                    <view class="iconfont icon-xiajiantou"
                          style="width: 40upx;height: 40upx;background: #D6DDF8;display: flex;justify-content: center;align-items: center;border-radius: 50%"
                          @click="toggleIsSpread"
                    ></view>
                </view>
                <view style="display: flex;justify-content: center;margin-top: 34upx" v-else>
                    <view class="iconfont icon-shangjiantou-copy"
                          style="width: 40upx;height: 40upx;background: #D6DDF8;display: flex;justify-content: center;align-items: center;border-radius: 50%"
                          @click="toggleIsSpread"
                    ></view>
                </view>
            </view>
            <view v-else class="cefu-bg">
                <view class="font-style-normal" style="font-weight: 500;font-size: 28upx;
color: rgba(102,102,102,0.87);">基于1200W例皮肤<br/>样本的分析算法</view>
                <image src="@/static/images/go-back.png" style="width: 80upx;height: 80upx"></image>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "index",
    props: {
        showType: {
            type: String,
            default: '1'
        },
        isShop: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            shopList: [
                {
                    url: require('@/static/images/active.png'),
                    title: '补水护理',
                    money: '169',
                    desp: '"深层补水，滋养精华液"'
                },
                {
                    url: require('@/static/images/active.png'),
                    title: '手部护理',
                    money: '199',
                    desp: '"深层补水，滋养精华液"'
                },
                {
                    url: require('@/static/images/active.png'),
                    title: '面部护理',
                    money: '199',
                    desp: '"深层补水，滋养精华液"'
                },
                {
                    url: require('@/static/images/active.png'),
                    title: '腿部护理',
                    money: '199',
                    desp: '"深层补水，滋养精华液"'
                }
            ],
            isSpread: false
        }
    },
    methods: {
        compBgText() {
            if (this.showType == 1) {
                return '点击查看附近门店'
            } else if (this.showType == 2) {
                return '为您推荐合适的服务'
            } else if (this.showType == 3) {
                return '点击开始皮肤测试'
            } else if (this.showType == 4) {
                return '为您推荐合适的产品'
            }
        },
        compBgClass() {
            if (this.showType == 1) {
                return 'view-fujin'
            } else if (this.showType == 2) {
                return 'view-fuwu'
            } else if (this.showType == 3) {
                return 'view-cefu'
            } else if (this.showType == 4) {
                return 'view-chanpin'
            }
        },
        toggleIsSpread() {
            this.isSpread = !this.isSpread
        }
    }
}
</script>

<style scoped lang="scss">
.top-content {
  .comp-bg {
    width: 510upx;
    height: 60upx;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding-left: 20upx;
    font-size: 28upx;
    color: #FFFFFF;
    font-weight: 800;
  }

  .view-fujin {
    background: url("@/static/images/mendian.png") no-repeat;
  }

  .view-fuwu {
    background: url("@/static/images/fuwu.png") no-repeat;
  }

  .view-cefu {
    background: url("@/static/images/cefu.png") no-repeat;
  }

  .view-chanpin {
    background: url("@/static/images/chanpin.png") no-repeat;
  }

  .content-main {
    box-sizing: border-box;
    padding: 8upx 20upx;
    background: linear-gradient(280deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0px 0px 12upx 0px rgba(25, 140, 255, 0.25);
    border: 2upx solid #FFFFFF;
    border-radius: 50upx;
    border-top-left-radius: 0;

    .shop-item {
      width: 100%;
      height: 160upx;
      padding: 20upx;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 0px 8upx 8upx 0px rgba(0, 0, 0, 0.05);
      border-radius: 20upx;
      display: flex;
      align-items: center;
      margin-bottom: 20upx;

      .shaw-img {
        width: 120upx;
        height: 120upx;
        margin-right: 40upx;
      }

      .show-desp {
        flex: 1;
      }
    }

    .fade-enter-active,
    .fade-leave-active {
      transition: all 1.5s ease;
    }

    .fade-enter-from {
      opacity: 0;
      transform: translateY(-20px);
    }

    .fade-leave-to {
      opacity: 0;
      transform: translateY(20px);
    }
  }

  .cefu-bg {
    background: linear-gradient(90deg, #DCDCFE 0%, #fff 100%);
    height: 140upx;
    border-top-right-radius: 48upx;
    border-bottom-right-radius: 48upx;
    max-width: 538upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30upx 40upx 30upx 20upx;
    box-sizing: border-box;
  }

}

</style>